import React, { useContext, useRef } from 'react';
import {
  createNativeStackNavigator,
  NativeStackNavigationOptions,
} from '@react-navigation/native-stack';
import { NavigationContainer } from '@react-navigation/native';
import { Animated, Dimensions } from 'react-native';
import { observer } from 'mobx-react-lite';
import { rootStore } from '../stores';
import { Nav } from '@/modules/basic/Nav';

// 导入页面
import { LoginPage } from '@/pages/auth/LoginPage';
import { RegisterPage } from '@/pages/auth/RegisterPage';
import { ResetPwdPage } from '@/pages/auth/ResetPwdPage';
import { MessageListPage } from '@/pages/message/MessageListPage';
import { MessageDetailPage } from '@/pages/message/MessageDetailPage';
import { SettingsPage } from '@/pages/setting/SettingsPage';
import { AboutPage } from '@/pages/setting/AboutPage';
import { BottomTabNavigator } from '@/navigation/BottomTabNavigator';
import { FormPage } from '@/pages/forms/FormPage';

// 定义路由类型
export type RootStackParamList = {
  Login: undefined;
  Register: undefined;
  ResetPwd: undefined;
  Main: undefined;
  MessageList: undefined;
  MessageDetail: { messageId: string };
  Settings: undefined;
  About: undefined;
  FormPage: { type: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

// 创建Store上下文
const StoreContext = React.createContext(rootStore);

export const useStore = () => {
  const context = useContext(StoreContext);
  if (!context) {
    throw new Error('useStore must be used within a StoreProvider');
  }
  return context;
};

const StackNav = React.memo(function () {
  const { authStore } = useStore();

  const initialRouteName = authStore.isAuthenticated ? 'Main' : 'Login';

  return (
    <Stack.Navigator
      initialRouteName={initialRouteName}
      screenOptions={options}
    >
      {/* 认证页面 */}
      <Stack.Screen
        name="Login"
        component={LoginPage}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="Register"
        component={RegisterPage}
        options={{ headerShown: false }}
      />
      <Stack.Screen
        name="ResetPwd"
        component={ResetPwdPage}
        options={{ headerShown: false }}
      />

      {/* 主应用页面 */}
      <Stack.Screen
        name="Main"
        component={BottomTabNavigator}
        options={{ headerShown: false }}
      />

      {/* 消息页面 */}
      <Stack.Screen
        name="MessageList"
        component={MessageListPage}
        options={{ title: '消息' }}
      />
      <Stack.Screen
        name="MessageDetail"
        component={MessageDetailPage}
        options={{ title: '消息详情' }}
      />

      {/* 设置页面 */}
      <Stack.Screen
        name="Settings"
        component={SettingsPage}
        options={{ title: '设置' }}
      />
      <Stack.Screen
        name="About"
        component={AboutPage}
        options={{ title: '关于' }}
      />

      {/* 表单页面 */}
      <Stack.Screen
        name="FormPage"
        component={FormPage}
        options={{ title: '记录费用' }}
      />
    </Stack.Navigator>
  );
});

export const Route = observer(() => {
  const height = Dimensions.get('screen').height;
  const navigationRef = useRef<any>(null);
  const [modals, setModals] = React.useState(() => [
    {
      id: 'main',
      ref: React.createRef<any>(),
      ty: new Animated.Value(0),
      bg: false,
    },
  ]);

  React.useEffect(() => {
    Nav.init(navigationRef);
  }, []);

  return (
    <StoreContext.Provider value={rootStore}>
      <NavigationContainer ref={navigationRef}>
        <StackNav />
      </NavigationContainer>
    </StoreContext.Provider>
  );
});

const options: NativeStackNavigationOptions = {
  contentStyle: {
    backgroundColor: '#FFF',
  },
  headerShown: false,
};
